<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>达达微博</title>
    <!-- 引入 Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- 引入 Axios 和 Vue -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
</head>

<body class="bg-gray-100">

<div class="container mx-auto p-10 bg-white rounded-lg shadow-lg mt-10">
    <h1 class="text-4xl font-bold text-center text-gray-800 mb-6">达达微博</h1>

    <!-- 用户登录状态 -->
    <div v-if="isLogin" class="welcome text-center mb-5">
        <h3 class="text-lg text-gray-700">欢迎 <span class="text-red-600 font-semibold" v-text="user.nickname"></span> 回来！</h3>
        <div class="mt-3 flex justify-center space-x-4">
            <a href="/insert.html" class="bg-blue-600 text-white hover:bg-blue-700 transition duration-300 flex items-center justify-center px-4 py-2 rounded-lg shadow-md">
                <i class="fas fa-pencil-alt mr-1"></i> 发微博
            </a>
            <a href="javascript:void(0)" @click="logout()" class="bg-red-600 text-white hover:bg-red-700 transition duration-300 flex items-center justify-center px-4 py-2 rounded-lg shadow-md">
                <i class="fas fa-sign-out-alt mr-1"></i> 退出登录
            </a>
        </div>
    </div>
    <div v-else class="welcome text-center mb-5">
        <div class="flex justify-center space-x-4">
            <a href="/reg.html" class="bg-green-600 text-white hover:bg-green-700 transition duration-300 flex items-center justify-center px-4 py-2 rounded-lg shadow-md">
                <i class="fas fa-user-plus mr-1"></i> 注册
            </a>
            <a href="/login.html" class="bg-blue-600 text-white hover:bg-blue-700 transition duration-300 flex items-center justify-center px-4 py-2 rounded-lg shadow-md">
                <i class="fas fa-sign-in-alt mr-1"></i> 登录
            </a>
        </div>
    </div>

    <hr class="my-5">

    <!-- 微博列表 -->
    <div v-if="arr.length === 0" class="no-weibos text-center text-gray-500 mt-10">
        <i class="fas fa-exclamation-circle text-yellow-500 text-2xl"></i>
        <p class="mt-2">暂无微博</p>
    </div>
    <ul class="weibo-list" v-else>
        <li class="weibo-item border-b border-gray-200 py-4 flex-wrap" v-for="w in arr" :key="w.id">
            <h3 class="text-md">
                <a :href="'/detail.html?id=' + w.id" class="text-gray-800 hover:text-red-500 transition duration-300 flex items-center">
                    <span class="font-bold text-lg text-red-600" v-text="w.nickname"></span>:
                    <span class="ml-2" v-text="w.content"></span>
                </a>
            </h3>
        </li>
    </ul>

    <!-- 添加一些间距 -->
    <div class="mt-5">
        <hr class="my-5">
    </div>
</div>

<script>
    (function () {
        let v = new Vue({
            el: ".container",
            data: {
                isLogin: false,
                user: {},
                arr: []
            },
            methods: {
                logout() {
                    axios.get("/v1/users/logout", {
                        headers: {
                            'X-CSRF-Token': 'your-csrf-token'
                        }
                    }).then(function (response) {
                        v.isLogin = false;
                    }).catch(function (error) {
                        console.error('Logout failed:', error);
                    });
                }
            },
            created: function () {
                axios.get("/v1/users/currentUser").then(function (response) {
                    v.user = response.data;
                    v.isLogin = response.data && typeof response.data !== 'string';
                }).catch(function (error) {
                    console.error('Failed to get current user:', error);
                    v.isLogin = false; // 默认设置为未登录
                });

                axios.get("/v1/weibo/selectIndex").then(function (response) {
                    v.arr = response.data;
                }).catch(function (error) {
                    console.error('Failed to get weibo data:', error);
                    v.arr = []; // 默认设置为空数组
                });
            }
        });
    })();
</script>

</body>

</html>